<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog class="add_metal_library" v-model="props.addVisible" :title="modalType === 'edit' ? '修改' : '新增'"
    @close="handleVisible('cancel')">
    <el-form ref="formRef" size="small" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="材料代码" prop="materialCode">
        <el-select v-model="formData.materialCode" placeholder="请选择" filterable @change="metalChange">
          <el-option :label="item.label" :value="item.label" v-for="item in metals"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="厚度" prop="thickness" >
        <el-input placeholder="请输入" v-model="formData.thickness" @blur="thinkChange"/>
      </el-form-item>
      <el-form-item label="属性代码" prop="attributeCode">
        <el-input placeholder="请输入" disabled v-model="formData.attributeCode" />
      </el-form-item>
      <el-form-item label="Exx" prop="exx">
        <el-input placeholder="请输入" disabled v-model="formData.exx" />
      </el-form-item>
      <el-form-item label="Eyy" prop="eyy">
        <el-input placeholder="请输入" disabled v-model="formData.eyy" />
      </el-form-item>
      <el-form-item label="Gxy" prop="gxy">
        <el-input placeholder="请输入" disabled v-model="formData.gxy" />
      </el-form-item>
      <el-form-item label="部段" prop="sectionNumber">
        <el-select v-model="formData.sectionNumber" placeholder="请选择" filterable @change="sectionChange">
          <el-option :label="item.label" :value="item.value" v-for="item in sections"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="对应PSHELL编号" prop="pshellNumber">
        <el-input placeholder="请输入" v-model="formData.pshellNumber" disabled/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="handleVisible('cancel')">取消</el-button>
        <el-button size="small" type="primary" @click="submitAdd"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script name="addMetal" setup>
import { addMetal, updateMetal,getSections ,getPshell} from '@/api/layerLibrary';
import { materialList } from '@/api/layupLibrary';

const formRef = ref(null);
const rules = ref({
  attributeCode: [{ required: true, message: '请输入属性代码', trigger: 'blur' }],
  exx: [{ required: true, message: '请输入Exx', trigger: 'blur' }],
  eyy: [{ required: true, message: '请输入Eyy', trigger: 'blur' }],
  gxy: [{ required: true, message: '请输入Gxy', trigger: 'blur' }],
  thickness: [{ required: true, message: '请输入厚度', trigger: 'blur' }],
  pshellNumber: [{ required: true, message: '请输入对应PSHELL编号', trigger: 'blur' }],
  materialCode: [{ required: true, message: '请输入材料代码', trigger: 'blur' }]
});
const props = defineProps(['addVisible', 'rowData']);
const emit = defineEmits(['handleEvent']);
const modalType = props?.rowData ? 'edit' : 'add';
const formData = ref({
  attributeCode: '',
  exx: '',
  eyy: '',
  gxy: '',
  thickness: '',
  pshellNumber: '',
  materialCode: '',
  sectionNumber:''
});
const metals = ref([]);
const sections = ref([]);
if (modalType === 'edit') {
  formData.value = props.rowData;
  //截取pshellNumber的前两位作为sectionNumber
  formData.value.sectionNumber = props.rowData.pshellNumber.substring(0, 2);
}
const handleVisible = (type) => {
  if (type === 'cancel') {
    emit('handleEvent');
  } else {
    emit('handleEvent', { type: 'refresh' });
  }
};
const submitAdd = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      console.log('验证失败');
      return false;
    }
    if (modalType === 'add') {
      addMetal(formData.value).then((res) => {
        if (res) {
          ElMessage({ showClose: true, message: '新增成功。', type: 'success' });
          handleVisible();
        }
      });
    } else {
      updateMetal(formData.value).then((res) => {
        if (res) {
          ElMessage({ showClose: true, message: '修改成功。', type: 'success' });
          handleVisible();
        }
      });
    }
  });
};
const metalChange = (value) => {
 console.log(value)
 console.log(metals.value)
 const selectedMetal = metals.value.find(item => item.value === value);
  if (selectedMetal) {
    formData.value.attributeCode = "";
    // const houdu = selectedMetal.nu.toString().replace(/\./g, '');
    formData.value.attributeCode = value;
    formData.value.exx = selectedMetal.e;
    formData.value.eyy = selectedMetal.e;
    formData.value.gxy = selectedMetal.e/selectedMetal.nu;
  } else {
    formData.value.attributeCode = '';
    formData.value.exx = '';
    formData.value.eyy = '';
    formData.value.gxy = '';
  }
};
const thinkChange = () => {
  console.log('厚度变化', formData.value.thickness);
  if (formData.value.thickness) {
    const houdu = formData.value.thickness.toString().replace(/\./g, '');
    formData.value.attributeCode = `${formData.value.materialCode}-${houdu}`;
  } 
};
const sectionChange = (value) => {
  console.log('sectionChange', value);
  // const selectedMetal = metals.value.find(item => item.value === value);
  formData.value.sectionNumber = value;
  getPshell({sectionNumber:value}).then((res) => {
    if (res.code === 200) {
      console.log('PSHELL', res);
      formData.value.pshellNumber = res.msg;
    }
  });
};
onMounted(() => {
  materialList({ materialName: '', materialNumber: '', pageNum: 1, pageSize: 9999 }).then((res) => {
    if (res.code === 200) {
      console.log('MATERIAL', res);
      metals.value = res.rows.map((item) => {
        return { label: item.materialNumber, value: item.materialNumber ,...item};
      });
    }
  });
  getSections().then((res) => {
    if (res.code === 200) {
      console.log('SECTION', res);
      sections.value = res.rows.map((item) => {
        return { label: item.dictLabel, value: item.dictValue };
      });
    }
  });
});
</script>
<style lang="scss" scoped>
.add_metal_library {
  user-select: none;
}
</style>
